<template>
    <el-dialog v-bind:title="titleName" :visible="visible" :modal="true" width="60%" :show-close="true"
               @open="onLoad" :destroy-on-close="true" :before-close="handleDialogClose" top="5%"
               :close-on-press-escape="false" :close-on-click-modal="false">
        <el-form :model="data" ref="newForm" :rules="rules" label-position="labelPosition" label-width="100px"
                 style="margin-top: -40px;">
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数据库类型" prop="dbType">
                        <el-select placeholder="请选择数据库类型" style="width: 90%" v-model="data.dbType"
                                   clearable :disabled="disTf">
                            <el-option v-for="item in dics.dbType" :key="item.dict_code"
                                       :label="item.dict_name"
                                       :value="item.dict_code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库环境" prop="dbEnv">
                        <el-select placeholder="请选择数据库类型" style="width: 90%" v-model="data.dbEnv"
                                   clearable :disabled="disTf">
                            <el-option v-for="item in dics.dbEnv" :key="item.dict_code"
                                       :label="item.dict_name"
                                       :value="item.dict_code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数据库地址" prop="dbHost">
                        <el-input v-model="data.dbHost" style="width: 90%" :disabled="disTf"
                                  placeholder="请填写数据库地址"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库名" prop="dbName">
                        <el-input v-model="data.dbName" style="width: 90%" :disabled="disTf"
                                  placeholder="请填写数据库名"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="数据库端口" prop="dbPort">
                        <el-input v-model="data.dbPort" style="width: 90%" :disabled="disTf"
                                  placeholder="请填写数据库端口"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库用户" prop="dbUser">
                        <el-input v-model="data.dbUser" style="width: 90%" :disabled="disTf"
                                  placeholder="请填写数据库用户"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="用户密码" prop="dbPwd">
                        <!--type="password"-->
                        <el-input v-model="data.dbPwd" style="width: 90%" :disabled="disTf"
                                  placeholder="请填写用户密码"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer" id="button" style="text-align: center;display:block;">
            <el-button type="primary" @click="save('newForm')" v-show="buttonShow">保 存</el-button>
            <el-button @click="close">关 闭</el-button>
        </span>
    </el-dialog>
</template>
<script>
    export default {
        name: "",
        components: {},
        inject: ['refresh'],
        props: {
            titleName: {
                type: String,
                default: ''
            },
            visible: {
                type: Boolean,
                default: false
            },
            data: {}
        },
        data() {
            return {
                that: this,
                buttonShow: false,
                disTf: false,
                url_insert: '/little-base-generator/generator/db/insertDb',
                url_update: '/little-base-generator/generator/db/updateDb',
                dics: {},
                rules: {
                    dbType: [{required: true, message: " ", trigger: "focus"}],
                    dbEnv: [{required: true, message: " ", trigger: "focus"}],
                    dbHost: [{required: true, message: " ", trigger: "focus"}],
                    dbName: [{required: true, message: " ", trigger: "focus"}],
                    dbPort: [{required: true, message: " ", trigger: "focus"}],
                    dbUser: [{required: true, message: " ", trigger: "focus"}],
                    dbPwd: [{required: true, message: " ", trigger: "focus"}],
                },
            }
        },
        methods: {
            onLoad() {
                this.dics = this.data.dics;
                //判断按钮隐藏显示和表单禁用启用
                if ("check" === this.data.optTyle) {
                    this.buttonShow = false;
                    this.disTf = true;
                } else {
                    this.buttonShow = true;
                    this.disTf = false;
                }
            },
            //右上角关闭事件
            handleDialogClose() {
                this.close();
            },
            //关闭窗口方法
            close() {
                this.refresh();
            },
            //保存
            save(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        delete this.data.dbAddDate;
                        delete this.data.dbRevDate;
                        var url = '';
                        if (this.data.dbId == '' || this.data.dbId == null || this.data.dbId == undefined) {
                            url = this.url_insert;
                        } else {
                            url = this.url_update;
                        }
                        this.$post(url, this.data).then(res => {
                            if ('success' === res.code) {
                                this.$message({type: res.code, message: res.msg});
                                this.refresh();
                            } else {
                                this.$message({type: res.code, message: res.msg});
                            }
                        });
                    } else {
                        this.$alert('您有必填项未填写，请确认！', '系统提示', {confirmButtonText: '确定'});
                    }
                });
            },
        }
    }
</script>


